<template>
  <div class="qrBox">
    <div class="qrInputBox">
      <q-input
        v-focus
        standout
        dense
        v-model="wo"
        placeholder="扫描工单..."
        bg-color="white"
        :input-style="{ color: 'black' }"
        class="inputBox"
        @keyup.enter="addScanWo()"
      >
        <q-icon
          name="fa-solid fa-square-plus"
          class="addSVG"
          @click="addScanWo()"
        />
      </q-input>
    </div>
  </div>
  <q-separator class="q-my-md" color="white" inset />
  <div class="qrListBox">
    <div class="qrListTitle">
      <span>已载入工单</span>
    </div>
    <!-- Scanned WorkOrder Item 100000293207-->
    <div v-if="scanWoList.length > 0">
      <div
        v-for="(swo, index) in scanWoList"
        :key="index"
        class="row woItemBox items-center"
      >
        <div class="col-auto addRemoveBtn">
          <q-icon
            name="fa-solid fa-square-minus"
            class="addRemoveSVG"
            @click="removeScanWo(index)"
          />
        </div>
        <div class="col woItem">工单 {{ swo }}</div>
      </div>
    </div>
    <div v-else class="noWO">
      <span>你还未载入任何工单</span>
    </div>
  </div>

  <div class="confirmBtnBox">
    <q-btn
      color="deep-purple-14"
      class="confirmBtn"
      label="确认"
      @click="confirmScanWo()"
    >
      <q-icon name="fa-solid fa-circle-check" class="confirmSVG" />
    </q-btn>
  </div>
</template>

<script setup>
import { ref, toRaw } from "vue";
import { useQuasar } from "quasar";
import { useUserStore } from "src/stores/modules/userStore";
import { useMassScanStore } from "src/stores/modules/massScanStore";

const wo = ref("");
const scanWoList = ref([]);
const $q = useQuasar();
const userStore = useUserStore();
const massScanStore = useMassScanStore();
const accID = userStore.currentDept.accID;
// Emit
const emit = defineEmits(["closeScanQR"]);

// Focus on the wo input field when page loaded
const vFocus = {
  mounted: (el) => el.focus(),
};

const addScanWo = () => {
  if (wo.value && wo.value !== " ") {
    scanWoList.value.push(wo.value);
    wo.value = "";
  } else {
    console.log("wo is not ");
  }
};

const removeScanWo = (idx) => {
  console.log("rwo index: ", idx);
  scanWoList.value.splice(idx, 1);
};

const confirmScanWo = async () => {
  console.log("confirm");
  if (scanWoList.value.length > 0) {
    //check is that any repeat scanWolist value, and remove it
    const uniqueScanWoList = [...new Set(scanWoList.value)];
    scanWoList.value = uniqueScanWoList;

    const res = await massScanStore.addWO(accID, toRaw(scanWoList.value));
    console.log("res: ", res);
    if (res) {
      if (massScanStore.errorWOList.length > 0) {
        $q.notify({
          type: "warning",
          textColor: "black",
          message: "无法存取所有工单 !",
          timeout: 2000,
          position: "center",
        });
        // emit('closeScanQR', true)
        emit("closeScanQR");
      } else {
        $q.notify({
          type: "positive",
          textColor: "white",
          message: "成功开始了所有工单!",
          timeout: 2000,
          position: "center",
        });
        // emit('closeScanQR', true)
        emit("closeScanQR");
      }
    } else {
      // return the error message and orderlist
      $q.notify({
        type: "negative",
        textColor: "white",
        message: "错误发生 !",
        timeout: 2000,
        position: "center",
      });
    }
  } else {
    // emit('closeScanQR', true)
    emit("closeScanQR");
  }
};
</script>

<style lang="scss" scoped>
.qrBox {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;

  .qrInputBox {
    .addSVG {
      margin-top: auto;
      margin-bottom: auto;
      font-size: 2rem;
      color: #7b6dff;
      float: right;
    }
  }
}

.qrListBox {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color: #cad9ff;
  padding: 10px 10px 10px 10px;
  .qrListTitle {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .woItemBox {
    margin-top: 5px;
    .addRemoveSVG {
      font-size: 2rem;
      margin-right: 10px;
      color: #4436d0;
    }
    .woItem {
      font-size: 1rem;
      background-color: white;
      color: black;
      padding: 5px 5px 5px 5px;
    }
  }

  .noWO {
    font-size: 1rem;
    text-align: center;
    color: #808080;
  }
}

.confirmBtnBox {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  .confirmBtn {
    font-size: 1.3rem;
    width: 100%;
  }
  .confirmSVG {
    margin-left: 10px;
  }
}
</style>
